<template>
  <div>
    <div class="top">
      <van-icon @click="goback" class="zuo" name="arrow-left" />
      我的
      <van-icon class="you" name="setting-o" @click="set" />
    </div>
    <div class="main">
      <p class="img">
        <img src="../assets/2.webp" />
      </p>
      <span @click="goreg">{{ msg }}</span>
      <van-grid class="my">
        <van-grid-item icon="peer-pay" text="待付款" />
        <van-grid-item icon="logistics" text="待收货" />
        <van-grid-item icon="thumb-circle-o" text="待评价" />
        <van-grid-item icon="records" text="全部订单" @click="goOrder" />
      </van-grid>
      <van-cell is-link @click="goress">地址管理</van-cell>
      <van-cell is-link>收藏</van-cell>
      <van-cell is-link>关于</van-cell>
      <p class="out">
        <img
          src="http://pro.statics.logoqs.techuangyi.com/2019/10/25/a15f2c299393995cc4082a5d232a0ad4.png?x-oss-process=image/resize,m_fill,w_312,h_175"
        />
      </p>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "@/components/Footer.vue";
export default {
  name: "MyVue",
  components: {
    // HomeVue
    Footer,
  },
  data() {
    return {
      show: false,
      msg: "点击登录",
    };
  },
  methods: {
    goOrder() {
      this.$router.push("/Order");
    },
    showPopup() {
      // this.show = true;
    },
    goreg() {
      this.$router.push("/Login");
    },
    goback() {
      this.$router.back();
    },
    set() {
      this.$router.push("/Sett");
    },
    goress() {
      this.$router.push("/Ress");
    },
  },
  created() {
    let token = localStorage.getItem("token");
    let userid = localStorage.getItem("userid");
    this.$axios({
      url: "user/info",
      params: {
        userid: userid,
      },
      headers: {
        token: token,
      },
    }).then((res) => {
      let data = res.data;
      console.log(data.data);
      if (data.code == 200) {
        data.data[0].username == ""
          ? (this.msg = data.data[0].tel)
          : (this.msg = data.data[0].username);
      }
    });
  },
};
</script>

<style scoped>
.top {
  width: 100%;
  height: 3.125rem;
  font-size: 1.25rem;
  text-align: center;
  line-height: 3.125rem;
  border-bottom: 0.0625rem solid black;
  background-color: red;
  position: relative;
}
.zuo {
  position: absolute;
  left: 0.625rem;
  font-size: 1.25rem;
  top: 0.9375rem;
}
.you {
  position: absolute;
  right: 0.625rem;
  font-size: 1.25rem;
  top: 0.9375rem;
}
img {
  width: 100%;
  height: 100%;
}
.img {
  border: 1px solid bisque;
  border-radius: 50%;
  width: 6.25rem;
  height: 6.25rem;
  overflow: hidden;
  text-align: center;
}
.main {
  height: 37.5rem;
  display: flex;
  flex: 1;
  flex-direction: column;
  /* justify-content:space-around; */
  align-items: center;
  margin-top: 1.25rem;
}
.out {
  width: 3.75rem;
  height: 2.5rem;
  /* background-color: rgba(248, 241, 232, 0.626); */
  /* border-radius: 0.625rem; */
  line-height: 40px;
  text-align: center;
  margin-top: 1.25rem;
}
.my {
  width: 100%;
}
</style>
